<template>
  <view class="list-view" v-for="item in data.forma.listb">
    <view class="item">
      <view class="item-header" @click="popup()">
        <view class="item-top">
          <view class="item-top-left">
            {{ item.nowDate + '&nbsp;&nbsp;' + item.userName }}
          </view>
          <view class="item-top-right">
            <button v-if="data.forma.docStatus === 'O'" size="mini" @click="edit(item)">修改</button>
          </view>
        </view>
        <view class="line-border-bottom"></view>
        <uni-row>
          <uni-col :span="12">
            <view class="item-sub-title"> 基本工时： {{ item.workTime }}</view>
            <view class="item-sub-title"> 平常加班： {{ item.common }}</view>
            <view class="item-sub-title"> 公休加班： {{ item.overTime }}</view>
          </uni-col>
          <uni-col :span="12">
            <view class="item-sub-title"> 假期加班： {{ item.holiday }}</view>
            <view class="item-sub-title"> 行备注： {{ item.freeTxt }}</view>
          </uni-col>
        </uni-row>
      </view>
    </view>
  </view>
  <uni-fab ref="fab" @fabClick="fabClick" v-if="data.forma.docStatus === 'O'" />

  <uni-popup ref="popupRef" type="bottom" background-color="#fff">
    <view class="popup-content" style="margin: 20rpx">
      <uni-forms err-show-type="toast" ref="baseForm" label-width="200rpx" :rules="customRules" :modelValue="data.form">
        <uni-forms-item label="编码" required>
          <uni-easyinput disabled v-model="data.form.docEntry" />
        </uni-forms-item>
        <uni-forms-item label="行号">
          <uni-easyinput disabled v-model="data.form.lineNum" />
        </uni-forms-item>
        <uni-forms-item label="用户编码" required>
          <uni-easyinput disabled v-model="data.form.userId" />
        </uni-forms-item>
        <uni-forms-item label="名称" required>
          <uni-easyinput disabled v-model="data.form.userName" />
        </uni-forms-item>
        <uni-forms-item label="月期间" required>
          <uni-easyinput disabled v-model="data.form.absId" />
        </uni-forms-item>
        <uni-forms-item label="日期" required name="nowDate">
          <uni-datetime-picker type="date" v-model="data.form.nowDate" />
        </uni-forms-item>
        <uni-forms-item label="工作时间" required>
          <uni-row>
            <button class="button" size="mini" :type="data.form.time1 ? 'warn' : null" @click="() => (data.form.time1 = !data.form.time1)">01</button>
            <button class="button" size="mini" :type="data.form.time2 ? 'warn' : null" @click="() => (data.form.time2 = !data.form.time2)">02</button>
            <button class="button" size="mini" :type="data.form.time3 ? 'warn' : null" @click="() => (data.form.time3 = !data.form.time3)">03</button>
            <button class="button" size="mini" :type="data.form.time4 ? 'warn' : null" @click="() => (data.form.time4 = !data.form.time4)">04</button>
            <button class="button" size="mini" :type="data.form.time5 ? 'warn' : null" @click="() => (data.form.time5 = !data.form.time5)">05</button>
            <button class="button" size="mini" :type="data.form.time6 ? 'warn' : null" @click="() => (data.form.time6 = !data.form.time6)">06</button>
            <button class="button" size="mini" :type="data.form.time7 ? 'warn' : null" @click="() => (data.form.time7 = !data.form.time7)">07</button>
            <button class="button" size="mini" :type="data.form.time8 ? 'warn' : null" @click="() => (data.form.time8 = !data.form.time8)">08</button>
            <button class="button" size="mini" :type="data.form.time9 ? 'warn' : null" @click="() => (data.form.time9 = !data.form.time9)">09</button>
            <button class="button" size="mini" :type="data.form.time10 ? 'warn' : null" @click="() => (data.form.time10 = !data.form.time10)">
              10
            </button>
            <button class="button" size="mini" :type="data.form.time11 ? 'warn' : null" @click="() => (data.form.time11 = !data.form.time11)">
              11
            </button>
            <button class="button" size="mini" :type="data.form.time12 ? 'warn' : null" @click="() => (data.form.time12 = !data.form.time12)">
              12
            </button>
            <button class="button" size="mini" :type="data.form.time13 ? 'warn' : null" @click="() => (data.form.time13 = !data.form.time13)">
              13
            </button>
            <button class="button" size="mini" :type="data.form.time14 ? 'warn' : null" @click="() => (data.form.time14 = !data.form.time14)">
              14
            </button>
            <button class="button" size="mini" :type="data.form.time15 ? 'warn' : null" @click="() => (data.form.time15 = !data.form.time15)">
              15
            </button>
            <button class="button" size="mini" :type="data.form.time16 ? 'warn' : null" @click="() => (data.form.time16 = !data.form.time16)">
              16
            </button>
            <button class="button" size="mini" :type="data.form.time17 ? 'warn' : null" @click="() => (data.form.time17 = !data.form.time17)">
              17
            </button>
            <button class="button" size="mini" :type="data.form.time18 ? 'warn' : null" @click="() => (data.form.time18 = !data.form.time18)">
              18
            </button>
            <button class="button" size="mini" :type="data.form.time19 ? 'warn' : null" @click="() => (data.form.time19 = !data.form.time19)">
              19
            </button>
            <button class="button" size="mini" :type="data.form.time20 ? 'warn' : null" @click="() => (data.form.time20 = !data.form.time20)">
              20
            </button>
            <button class="button" size="mini" :type="data.form.time21 ? 'warn' : null" @click="() => (data.form.time21 = !data.form.time21)">
              21
            </button>
            <button class="button" size="mini" :type="data.form.time22 ? 'warn' : null" @click="() => (data.form.time22 = !data.form.time22)">
              22
            </button>
            <button class="button" size="mini" :type="data.form.time23 ? 'warn' : null" @click="() => (data.form.time23 = !data.form.time23)">
              23
            </button>
            <button class="button" size="mini" :type="data.form.time24 ? 'warn' : null" @click="() => (data.form.time24 = !data.form.time24)">
              24
            </button>
          </uni-row>
        </uni-forms-item>
        <uni-forms-item label="类型" required>
          <uni-data-checkbox v-model="data.form.del" :localdata="data.localdata" />
        </uni-forms-item>

        <uni-forms-item label="行备注">
          <uni-easyinput v-model="data.form.freeTxt" placeholder="请输入内容"></uni-easyinput>
        </uni-forms-item>

        <button type="primary" @click="submit('valiForm')">保 存</button>
      </uni-forms>
    </view>
  </uni-popup>
</template>

<script setup>
  import { ref, reactive } from 'vue';
  import { mmordbApi } from '@/api/business/erp/mmord-api';
  import { onShow } from '@dcloudio/uni-app';
  import { useUserStore } from '@/store/modules/system/user';
  import { mmordApi } from '../../api/business/erp/mmord-api';

  const store = useUserStore();
  const props = defineProps({
    docEntry: 0,
    absId: 202001,
    docStatus: 'C',
  });
  const data = reactive({
    form: {
      docEntry: props.docEntry,
      userId: store.$state.employeeId,
      userName: store.$state.loginName,
      absId: props.absId,
      nowDate: null,
      time1: false,
      time2: false,
      time3: false,
      time4: false,
      time5: false,
      time6: false,
      time7: false,
      time8: false,
      time9: true,
      time10: true,
      time11: true,
      time12: true,
      time13: false,
      time14: false,
      time15: true,
      time16: true,
      time17: true,
      time18: true,
      time19: false,
      time20: false,
      time21: false,
      time22: false,
      time23: false,
      time24: false,
      lineStatus: 'O',
      del: 'a',
      freeTxt: '',
      workTime: 0,
      overTime: 0,
      holiday: 0,
    },
    localdata: [
      {
        text: '正常',
        value: 'a',
      },
      {
        text: '调休',
        value: 'b',
      },
      {
        text: '旷工',
        value: 'c',
      },
    ],
    forma: {
      listb: [],
    },
  });
  const queryForm = {
    pageNum: 1,
    pageSize: 10,
    docEntry: parseInt(props.docEntry),
    userId: store.$state.employeeId,
  };

  const list = ref([]);
  const baseForm = ref();

  const customRules = {
    nowDate: {
      rules: [
        {
          required: true,
          errorMessage: '日期不能为空！',
        },
      ],
    },
  };

  const popupRef = ref({});

  function submit() {
    baseForm.value
      .validate()
      .then((res) => {
        if (res) {
          if (data.form.lineNum) {
            mmordbApi.update(data.form).then((res) => {
              popupRef.value.close();
              queryList();
            });
          } else {
            mmordbApi.add(data.form).then((res) => {
              popupRef.value.close();
              queryList();
            });
          }
        }
      })
      .catch((err) => {});
  }

  function queryList() {
    mmordApi.myInfo(queryForm).then((res) => {
      data.forma = res.data;
    });
  }

  onShow(() => {
    queryList();
  });

  function popup(item) {}

  function fabClick(item) {
    data.form.lineNum = null;
    popupRef.value.open();
  }

  function edit(item) {
    popupRef.value.open();
    data.form = item;
  }
</script>

<style lang="scss" scoped>
  .list-view {
    margin: 20rpx 24rpx;
  }

  .item {
    .item-header {
      padding: 0 30rpx;
    }

    box-sizing: border-box;
    width: 700rpx;
    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
    padding-top: 24rpx;
    margin-bottom: 30rpx;
    overflow: hidden;

    .item-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .item-top-left {
        font-size: 28rpx;
        font-weight: 400;
        color: #777777;
      }

      .item-top-right {
        .tag {
          width: 112rpx;
          height: 40rpx;
          border-radius: 4rpx;
          text-align: center;
          line-height: 40rpx;
          font-size: 24rpx;

          &[type='warring'] {
            color: #ff6c00;
            background: #fff0ed;
          }

          &[type='success'] {
            color: $uni-color-success;
            background: #f7f8f9;
          }
        }
      }
    }

    .item-title {
      margin-top: 20rpx;
      margin-bottom: 12rpx;
      font-size: 34rpx;
      font-weight: 700;
      color: #444444;
    }

    .item-sub-title {
      font-size: 28rpx;
      color: #777777;
      margin-top: 20rpx;

      &:last-child {
        padding-bottom: 20rpx;
        margin-bottom: 0;
      }
    }

    .order-end-time {
      height: 40rpx;
      background: #ff6c00;
      box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }

  .line-border-bottom {
    border-bottom: 1rpx solid #ededed;
  }

  .button {
    width: 90rpx;
  }

  .uni-forms-item {
    margin-bottom: 4rpx;
  }
</style>
